<template>
    <div class="todo-footer">
        <label>
            <input :checked="isAll" type="checkbox" @click="allChange" />
        </label>
        <span>
            <span>已选中{{ done }}</span> / 全部{{ all }}
        </span>
        <button :style="isBlock" class="btn btn-danger" style="" @click="clearHandler">清除已完成任务</button>
    </div>
</template>

<script>
export default {
    name: 'My-Footer',
    props: ['todos', 'allChange', 'clear'],
    data() {
        return {
            isBlock: {
                display: 'none'
            }
        }
    },
    computed: {
        // 计算属性
        // 已选中
        done() {
            return this.todos.filter((todo) => todo.done).length
        },
        // 全部
        all() {
            return this.todos.length
        },
        // 全选
        isAll() {
            return this.done === this.all && this.all !== 0
        }
    },
    // 清除已完成任务显示隐藏
    watch: {
        // 监视todos的变化
        done() {
            if (this.done > 0) {
                this.isBlock = {
                    display: 'block'
                }
            } else {
                this.isBlock = {
                    display: 'none'
                }
            }
        }
    },
    methods: {
        clearHandler() {
            if (window.confirm('确定清除吗？')) {
                this.clear()
            }
        }
    }
}
</script>

<style scoped></style>
